<template>
    <div>
        <a-layout :class="['layout', device]">
            <!-- 左侧菜单-抽屉 -->
            <a-drawer
                    v-if="isMobile()"
                    placement="left"
                    :wrapClassName="`drawer-sider ${navTheme}`"
                    :closable="false"
                    :visible="collapsed"
                    @close="drawerClose">
                <SideMenu
                        mode="inline"
                        :menus="menus"
                        :theme="navTheme"
                        :collapsed="false"
                        :collapsible="true"
                        @menuSelect="menuSelect"
                />
            </a-drawer>

            <!-- 左侧菜单 -->
            <SideMenu
                    v-else-if="isSideMenu()"
                    mode="inline"
                    :menus="menus"
                    :theme="navTheme"
                    :collapsed="collapsed"
                    :collapsible="true"/>
            <!--中间布局-->
            <a-layout :class="[layout, `content-width-${contentWidth}`]"
                      :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
                <!-- 头 -->
                <GlobalHeader
                        :mode="layout"
                        :menus="menus"
                        :theme="navTheme"
                        :collapsed="collapsed"
                        :device="device"
                        @toggle="toggle"/>

                <!-- layout content -->
                <a-layout-content
                        :style="{ height: '100%', margin: '0px 0px 0px 0px', paddingTop: fixedHeader ? '64px' : '0' }">
                    <div style="margin-top: 1px">
                        <multi-tab v-if="multiTab"></multi-tab>
                    </div>
                    <transition mode="out-in" name="page-transition">
                        <keep-alive v-if="keepAlive">
                            <router-view :key="key"/>
                        </keep-alive>
                        <router-view v-if="!keepAlive" :key="key"/>
                    </transition>
                </a-layout-content>

                <!-- layout footer -->
                <a-layout-footer>
                    <global-footer/>
                </a-layout-footer>

            </a-layout>

        </a-layout>
    </div>
</template>

<script>
    import SideMenu from '@/core/layouts/Menu/SideMenu'
    import GlobalHeader from '@/core/layouts/GlobalHeader'
    import GlobalFooter from '@/core/layouts/GlobalFooter'
    import MultiTab from '@/core/layouts/MultiTab'
    import Vue from 'vue'
    import {SettingsModule} from "@/core/store/modules/settings";
    import Setting from "@/core/mixin/Setting";

    export default {
        mixins: [Setting],
        name: 'MainLayout',
        components: {
            GlobalFooter,
            MultiTab,
            SideMenu,
            GlobalHeader
        },
        // Vue.ls.set("colorWeak", defaultSetting.colorWeak);
        // Vue.ls.set("production", defaultSetting.production);
        data() {
            return {
                weak: false,
                collapsed: false,
                menus: Vue.ls.get('menus')
            }
        },
        computed: {
            key() {
                return this.$route.path
            },
            //默认meta.keepAlive =true ->开启缓存
            keepAlive() {
                if (this.$route.meta.keepAlive) {
                    return this.$route.meta.keepAlive;
                }
                return true;
            }
        },
        watch: {
            sidebar(val) {
                this.collapsed = !val
            }
        },
        created() {
            this.collapsed = !this.sidebar;
            ////console.log("this.collapsed", this.collapsed);
            ////console.log("this.sidebar", this.sidebar);
        },
        mounted() {
            const userAgent = navigator.userAgent;
            if (userAgent.indexOf('Edge') > -1) {
                this.$nextTick(() => {
                    this.collapsed = !this.collapsed;
                    setTimeout(() => {
                        this.collapsed = !this.collapsed
                    }, 16)
                })
            }
        },
        methods: {
            toggle() {
                this.collapsed = !this.collapsed;
                SettingsModule.change({key: "sidebar", value: !this.collapsed});
                const event = document.createEvent('HTMLEvents');
                event.initEvent('resize', true, true);
                event.eventType = 'message';
                window.dispatchEvent(event)
            },

            menuSelect() {
            },
            drawerClose() {
                this.collapsed = false
            }
        }
    }
</script>

<style lang="less">
    .page-transition-enter {
        opacity: 0;
    }

    .page-transition-leave-active {
        opacity: 0;
    }

    .page-transition-enter .page-transition-container,
    .page-transition-leave-active .page-transition-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
</style>
